<template>
	<div class="top-box">
		<div class="title">
			<img src="../../public//music.png" alt="" />
			音乐播放器
		</div>
		<div class="btn-box">
			<el-dropdown trigger="click" placement="bottom" v-if="isLogin" @command="handleCommand">
				<div class="user-box">
					<div class="avatar"></div>
					<div class="user-name">
						{{ userName }}
					</div>
				</div>
				<template #dropdown>
					<el-dropdown-menu class="user-dropdown-menu">
						<el-dropdown-item command="profile">个人中心</el-dropdown-item>
						<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
			<el-button class="btn minimize-btn" type="" :icon="Minus" color="transparent" @click="api.minimizeWindow()">
			</el-button>
			<el-button
				v-if="isLogin"
				class="btn maximize-btn"
				type=""
				:icon="CopyDocument"
				color="transparent"
				@click="api.maximizeWindow()"
			>
			</el-button>
			<el-button class="btn close-btn" type="" :icon="Close" color="transparent" @click="api.closeWindow()">
			</el-button>
		</div>
	</div>
</template>
<script lang="ts">
	export default {
		name: 'TopTile',
	};
</script>
<script setup lang="ts">
	import { Minus, Close, CopyDocument } from '@element-plus/icons-vue';
	import { ref, onMounted, onUnmounted } from 'vue';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const { api } = window;
	const isLogin = ref(false);
	const userName = ref('');
	const checkLoginStatus = () => {
		const loginStatus = localStorage.getItem('isLogin');
		userName.value = localStorage.getItem('userName') || '';
		isLogin.value = loginStatus !== null;
		console.log('isLogin', isLogin.value);
		
	};
	const handleStorageChange = (event: StorageEvent) => {
		if (event.key === 'isLogin') {
			checkLoginStatus();
		}
	};

	const logOut = () => {
		localStorage.removeItem('isLogin');
		localStorage.removeItem('userName');
		api.clearToken();
		router.replace({ name: 'login' });
	};
	
	const handleCommand = (command: string) => {
		if (command === 'logout') {
			logOut();
		} else if (command === 'profile') {
			// 个人中心功能，后续开发
			console.log('个人中心');
		}
	};
	
	onMounted(() => {
		checkLoginStatus();
		window.addEventListener('storage', handleStorageChange);
	});

	onUnmounted(() => {
		window.removeEventListener('storage', handleStorageChange);
	});
</script>

<style scoped lang="scss">
	.top-box {
		-webkit-app-region: drag;
		width: 100%;
		height: 30px;
		padding: 5px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		.title {
			display: flex;
			align-items: center;
			img {
				width: 17px;
				height: 17px;
				margin-right: 5px;
			}
			font-size: 13px;
			padding-left: 12px;
			/* 设置字体渐变色 */
			color: #fff;
			font-weight: 500;
		}
		.btn-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			:deep(.el-dropdown) {
				&:focus {
					outline: none;
				}
			}
			
			.user-box {
				margin-right: 12px;
				display: flex;
				align-items: center;
				color: #fff;
				-webkit-app-region: no-drag;
				.avatar {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				}
				.user-name {
					font-size: 13px;
					padding-left: 5px;
				}
				&:hover {
					cursor: pointer;
				}
			}
			.minimize-btn:focus {
				outline: none;
			}
			.maximize-btn {
				rotate: 180deg;
			}
			.close-btn {
				&:hover {
					background-color: #ff62a5;
				}
			}
			.el-button {
				border: none;
				color: rgba(255, 255, 255, 0.9);
				-webkit-app-region: no-drag; /* 按钮不允许拖动 */
				&:hover {
					border: none;
					color: #fff;
				}
			}
			.el-button + .el-button {
				margin-left: 0;
			}
		}
	}
</style>

<style lang="scss">
// 下拉菜单全局样式（恢复原始渐变样式）
.user-dropdown-menu {
	background: linear-gradient(72deg, rgba(240, 147, 194, 0.9), rgba(142, 160, 255, 0.9));
	border: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	
	.el-dropdown-menu__item {
		background: linear-gradient(72deg, rgba(240, 147, 194, 0.1), rgba(142, 160, 255, 0.1));
		color: #606266;
		transition: all 0.3s;
		
		&:hover {
			background: linear-gradient(72deg, rgba(240, 147, 194, 0.1), rgba(142, 160, 255, 0.1)) !important;
			color: #6b76ff !important;
		}
	}
	
	.el-dropdown-menu__item--divided {
		border-top-color: rgba(255, 255, 255, 0.2);
	}
	
	.el-popper__arrow:before {
		background: linear-gradient(72deg, rgba(240, 147, 194, 0.9), rgba(142, 160, 255, 0.9));
		border: none;
	}
}
</style>
